<template>
  <div>
    <el-row style="width: 310px; float: left; margin-bottom: 10px">
      <el-input
        placeholder="请输入内容"
        v-model="menberSearch"
        style="width: 240px"
        clearable
      />
      <el-button type="primary" @click="memberAll">查询</el-button>
      <el-button
        style="float: left; margin: 10px 0 0"
        type="primary"
        @click="addFormVisible = true"
        >新增</el-button
      >
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData.list"
      tooltip-effect="dark"
      style="width: 100%; min-height: 630px; margin-bottom: 10px"
      :stripe="true"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        fixed
        prop="fileNumber"
        label="档案号"
        show-overflow-tooltip
      />
      <el-table-column prop="name" label="姓名" show-overflow-tooltip />
      <el-table-column label="性别" prop="sex" sortable show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column
        label="年龄"
        prop="birthday"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ agecalculate(scope.row.birthday) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="users[0].username"
        label="健康师"
        show-overflow-tooltip
      />
      <el-table-column
        prop="phoneNumber"
        label="手机号码"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        label="注册时间"
        prop="regTime"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          {{ scope.row.regTime }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            查看
          </el-button>
          <el-button type="text" size="small"> 编辑 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="RequestData.pageSize"
      :page-num="RequestData.pageNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.tableData.total"
    >
    </el-pagination>

    <!-- 模态框 -->
    <el-dialog
      title="新增"
      :visible.sync="addFormVisible"
      style="min-width: 700px"
      width="700px"
      :close-on-click-modal="false"
      :show-close="true"
      :before-close="handleClose"
      @open="openCurrentDialog"
    >
      <el-form
        size="mini"
        label-position="right"
        label-width="100px"
        :inline="true"
        :model="form"
        :rules="addForm"
        ref="form"
        status-icon
        class="demo-ruleForm"
      >
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-tickets"></i> 基本信息</span>
            <el-form-item label="档案号">
              <el-input v-model="form.fileNumber" readonly></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="idCard">
              <el-input v-model="form.idCard" @input="IdcardParse"></el-input>
            </el-form-item>
            <el-form-item label="登录密码">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input v-model="form.phoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="form.sex" readonly> </el-input>
            </el-form-item>
            <el-form-item label="民族">
              <el-input v-model="form.nationality"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="form.age" readonly></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker
                style="width: 180px"
                v-model="form.birthday"
                class="font-dialog"
                readonly
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.eamil"></el-input>
            </el-form-item>
            <el-form-item label="婚姻状况">
              <el-select
                style="width: 180px"
                v-model="form.margin"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in marginOpthios"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职业">
              <el-input v-model="form.job"></el-input>
            </el-form-item>
            <el-form-item label="文化程度">
              <el-select
                style="width: 180px"
                v-model="form.culture"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in cultureOpthios"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="hometown" label="籍贯">
              <v-region
                style="
                  min-width: 180px;
                  max-width: 180px;
                  overflow: hidden;
                  white-space: nowrap;
                "
                type="group"
                @values="regionChange"
                :town="true"
              >
              </v-region>
            </el-form-item>
            <el-form-item label="健康管理师">
              <el-input v-model="form.healthManager"></el-input>
            </el-form-item>
            <el-form-item label="档案状态">
              <el-switch
                style="width: 180px"
                v-model="form.fileStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="form.remark"
                :show-word-limit="true"
                resize="none"
                style="width: 470px"
              >
              </el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane class="dynamicInformation">
            <span slot="label">
              <i class="el-icon-document-copy"> 动态信息</i>
            </span>
            <el-form-item label="身高">
              <el-input v-model="form.height">
                <template slot="append">CM</template>
              </el-input>
            </el-form-item>
            <el-form-item label="体重">
              <el-input v-model="form.weight">
                <template slot="append">KG</template>
              </el-input>
            </el-form-item>
            <el-form-item label="舒张压">
              <el-input v-model="form.diastolicBloodPressure">
                <template slot="append">DBP</template>
              </el-input>
            </el-form-item>
            <el-form-item label="收缩压">
              <el-input v-model="form.systolicBloodPressure">
                <template slot="append">SBP</template>
              </el-input>
            </el-form-item>
            <el-form-item label="呼吸">
              <el-input v-model="form.breathe">
                <template slot="append">次/分</template>
              </el-input>
            </el-form-item>
            <el-form-item label="体温">
              <el-input v-model="form.bodyTemperature">
                <template slot="append">℃</template>
              </el-input>
            </el-form-item>
            <el-form-item label="腰围">
              <el-input v-model="form.waistline">
                <template slot="append">CM</template>
              </el-input>
            </el-form-item>
            <el-form-item label="臀围">
              <el-input v-model="form.hipCircumference">
                <template slot="append">CM</template>
              </el-input>
            </el-form-item>
            <el-form-item label="BMI">
              <el-input v-model="form.bmi">
                <template slot="append">kg/m^</template>
              </el-input>
            </el-form-item>
            <el-form-item label="血氧饱和度">
              <el-input v-model="form.bloodOxygen">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label">
              <i class="el-icon-document"> 病史</i>
            </span>
            <el-form-item label="既往史">
              <el-input
                type="textarea"
                :rows="4"
                v-model="form.pastDisease"
                :show-word-limit="true"
                resize="none"
                style="width: 470px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="家族史">
              <el-input
                type="textarea"
                :rows="4"
                v-model="form.familySickHistory"
                :show-word-limit="true"
                resize="none"
                style="width: 470px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="过敏史">
              <el-input
                type="textarea"
                :rows="4"
                v-model="form.allergyHistory"
                :show-word-limit="true"
                resize="none"
                style="width: 470px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="病史">
              <el-input
                type="textarea"
                :rows="4"
                v-model="form.sickHistory"
                :show-word-limit="true"
                resize="none"
                style="width: 470px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="慢性病">
              <el-input
                type="textarea"
                :rows="4"
                v-model="form.chronic"
                :show-word-limit="true"
                resize="none"
                style="width: 470px"
              >
              </el-input>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeCurrentDialog('form')">取 消</el-button>
        <el-button type="primary" @click="addFormVisible = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "HealthVuebackstageMemberrecord",

  data() {
    var validateIdCard = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入身份证号"));
      } else {
        if (value.length < 18) {
          callback(new Error("身份证号有误"));
        }
        callback();
      }
    };
    var validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error("请输入姓名"))
      } else {
        callback();
      }
    };
    return {
      // 表格加载动画
      loading: false,
      // 新增模态框
      addFormVisible: false,
      // 新增
      form: {
        fileNumber: "",
        idCard: "",
        password: "",
        phoneNumber: "",
        name: "",
        sex: "",
        // 民族
        nationality: "",
        age: "",
        birthday: "",
        eamil: "",
        // 婚姻状态
        marriage: "",
        job: "",
        // 文化程度
        culture: "",
        // 籍贯
        hometown: "",
        // 健康管理师
        healthManager: "",
        // 档案状态
        fileStatus: "",
        remark: "",
        heigth: "",
        // 体重
        weight: "",
        // 舒张压
        diastolicBloodPressure: "",
        // 收缩压
        systolicBloodPressure: "",
        // 呼吸
        breathe: "",
        // 体温
        bodyTemperature: "",
        // 腰围
        waistline: "",
        // 臀围
        hipCircumference: "",
        bmi: "",
        // 血氧
        bloodOxygen: "",
        // 既往史
        pastDisease: "",
        // 家族史
        familySickHistory: "",
        // 过敏史
        allergyHistory: "",
        // 病史
        sickHistory: "",
        // 慢性病
        chronic: "",
      },
      addForm: {
        idCard: [{ validator: validateIdCard, trigger: "blur" }],
        name: [{ validator: validateName, trigger: "blur" }]
      },

      // 婚姻下拉框
      marginOpthios: [
        {
          value: "1",
          label: "未婚",
        },
        {
          value: "2",
          label: "已婚(有配偶)",
        },
        {
          value: "3",
          label: "丧偶",
        },
        {
          value: "4",
          label: "离婚",
        },
      ],
      // 文化程度
      cultureOpthios: [
        {
          value: "1",
          label: "小学",
        },
        {
          value: "2",
          label: "初中",
        },
        {
          value: "3",
          label: "高中",
        },
        {
          value: "4",
          label: "专科",
        },
        {
          value: "5",
          label: "本科",
        },
        {
          value: "6",
          label: "硕士",
        },
        {
          value: "7",
          label: "博士",
        },
        {
          value: "8",
          label: "院士",
        },
        {
          value: "0",
          label: "其它",
        },
      ],

      // 搜索框
      menberSearch: "",
      // 响应数据
      tableData: [],
      // 请求数据
      RequestData: {
        pageNum: 1,
        pageSize: 10,
        oneRequirement: window.sessionStorage.getItem("healthUserName"),
        requirement: {
          fileNumber: "",
          name: "",
        },
      },
    };
  },

  mounted() {
    this.memberAll();
  },

  methods: {
    // 查询全部
    memberAll() {
      this.RequestData.requirement.fileNumber = this.menberSearch;
      this.RequestData.requirement.name = this.menberSearch;
      this.$http
        .post("member", JSON.stringify(this.RequestData, this.Member), {
          headers: {
            "Content-Type": "application/json;charset=utf-8",
          },
        })
        .then((res) => {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.tableData = res.data.dataList;
          }, 1000);
        });
    },
    // 年龄计算
    agecalculate(val) {
      return this.$utils.BirthdayAge(val);
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      this.RequestData.pageSize = val;
      this.memberAll();
    },
    handleCurrentChange(val) {
      this.RequestData.pageNum = val;
      this.memberAll();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.form = {};
          done();
        })
        .catch(() => {});
    },
    closeCurrentDialog() {
      this.addFormVisible = false;
      this.form = {};
    },
    openCurrentDialog() {
      // 使用this.$forceUpdate强制重新渲染
      this.$forceUpdate();
      // 设置档案号
      this.form.fileNumber = "F" + this.$utils.DateTimestamp(new Date());
      // 健康管理师
      this.form.healthManager = window.sessionStorage.getItem("healthUserName");
    },
    // 省/直辖市、 市、 区/县、 乡/镇/街道
    regionChange(data) {
      console.log(data);
    },

    IdcardParse(val) {
      this.form.sex = this.$utils.IdcardParse(val, "sex") == 1 ? "男" : "女";
      this.form.birthday = this.$utils.IdcardParse(val, "birthday");
      this.form.age = this.$utils.IdcardParse(val, "age");
      // 取出生日作为默认密码
      this.form.password = val.substring(6, 14);

      if (val === "") {
        this.form.sex = "";
        this.form.age = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dynamicInformation .el-input {
  width: 180px;
}
</style>